<template>

  <BasicDrawer class="basicDrawerDiv" @register="registerDrawer" :title="null" v-bind="$attrs" width="55%">
    <template #title>
      <p>充电站详情 </p>
    </template>
    <div class="stationDetailDrawer">
      <div class="sdd_top">
        <span class="drawerTitle">{{ stationDetail.stationName }}</span>
        <a-tag color="#1890ff">{{ stationDetail.stationType_dictText }}</a-tag>
        <a-tag color="#30e78a">{{ stationDetail.stationStatus_dictText }}</a-tag>
      </div>
      <div class="jichuinfo">
        <div class="content">
          <Description layout="vertical" @register="register" class="mt-4" />
        </div>
        <div class="gdMap">
          <div class="jichuinfo_top">
            <GaoDe :mapData='mapData'></GaoDe>
          </div>
          <div class="jichuinfo_center">
            <p>
              <img src="/@/assets/images/station/u314.svg" alt="" /> <span>{{
								getAreaTextByCode(stationDetail.areaArray)
							}}</span>
            </p>
            <p>
              <img src="/@/assets/images/station/u321.png" alt="" />
              <span>经度：{{ stationDetail.stationLng }}</span>
              <a-divider type="vertical" style="background-color: #969696; width: 2px; height: 10px" />
              <span> 维度：{{ stationDetail.stationLat }}</span>
            </p>
            <p>
              <img src="/@/assets/images/station/u327.png" alt="" />
              <span>联系人：{{ stationDetail.contactPerson || '--' }}</span>
              <a-divider type="vertical" style="background-color: #969696; width: 2px; height: 10px" />
              <span> 联系电话：：{{ stationDetail.contactPhone || '--' }}</span>
            </p>
          </div>
          <!-- <img src="/@/assets/images/station/u330.jpg" alt="" /> -->
          <div class="carousel" style="width:300px ">
            <a-carousel class="liyucarousel" autoplay>
              <div v-if="stationDetail.stationPic" v-for="item in stationDetail.stationPic.split(',')">
                <img :src="item" alt="" />
              </div>
              <!-- <div>
								<img src="/@/assets/images/station/u330.jpg" alt="" />
							</div>
							<div>
								<img src="/@/assets/images/station/u330.jpg" alt="" />
							</div>
							<div>
								<img src="/@/assets/images/station/u330.jpg" alt="" />
							</div> -->
            </a-carousel>
          </div>
        </div>
      </div>
      <div class="shebeiinfo">
        <div class="shebeiinfo_title">
          <span class="shebeiinfo_title_span">设备信息</span>
          <div class="tabs" style="width: 60%;">
            <!-- <span>直流桩 {{ stationDetail.dcChargers }}</span>
            <a-divider type="vertical" style="background-color: #969696; width: 2px; height: 10px" />
            <span>交流桩 {{ stationDetail.acChargers }}</span> -->
            <a-tabs v-model:activeKey="activeKey" size="small" @change="tabsEvent(activeKey)">
              <a-tab-pane key="1" :tab="'直流桩 ' + stationDetail.dcChargers"></a-tab-pane>
              <a-tab-pane key="2" :tab="'交流桩 ' + stationDetail.acChargers"></a-tab-pane>
            </a-tabs>
          </div>
        </div>
        <div class="listshebei">
          <div v-if="StakeListData.length > 0" class="listshebeiones" v-for="item in StakeListData">
            <img src="/@/assets/images/station/u336.png" alt="" />
            <div class="onesright">
              <p>{{ item.id }} <a-tag color="#1890ff">{{ item.stakeType_dictText }}</a-tag></p>
              <p>{{ item.stakeName }} <a-tag v-if="item.doubleGun !== 0" color="#bcb846">双枪</a-tag></p>
              <p><img src="@/assets/images/station/u348.png" alt="" />额定功率 {{ item.ratedPower }}kW</p>
              <p><img src="@/assets/images/station/u342.png" alt="" />输出电压
                {{ item.minOutputVoltage }}~{{ item.maxOutputVoltage }}V</p>
              <p><img src="@/assets/images/station/u345.png" alt="" />输出电流
                {{ item.minOutputCurrent }}~{{ item.maxOutputCurrent }}A</p>
            </div>
          </div>
          <div class="emptydiv" v-else>
            <a-empty description="暂无数据" />
          </div>
        </div>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref, toRaw, nextTick} from 'vue';
import {BasicDrawer, useDrawer, useDrawerInner} from '/@/components/Drawer';
import {Description, DescItem, useDescription} from '/@/components/Description/index';
import GaoDe from './GaoDe.vue';
import {object} from 'vue-types';
import {defHttp} from '/@/utils/http/axios';

// Emits声明
const emit = defineEmits(['register', 'success']);

import {getAreaTextByCode} from '/@/components/Form/src/utils/Area';
// 抽屉数据
const mapData = reactive({
	longitude: '',
	latitude: '',
	stationName: '',
});

const mockData: Recordable = reactive({
	operatorId: '',
	stationName: '',
	areaArray: '',
	operatorId_dictText: '',
});
let stationDetail = ref({
	dcChargers: 0,
	acChargers: null,
});
const [registerDrawer, {setDrawerProps, closeDrawer}] = useDrawerInner(async (data) => {
	console.log('data-data', toRaw(data.Drawerrecord));
	stationDetail.value = {...stationDetail.value, ...toRaw(data.Drawerrecord)};
	mockData.operatorId = stationDetail.value.operatorId;
	mockData.stationName = stationDetail.value.stationName;
	mockData.areaArray = getAreaTextByCode(stationDetail.value.areaArray);
	mockData.operatorId_dictText = stationDetail.value.operatorId_dictText;
	mapData.longitude = stationDetail.value.stationLng;
	mapData.latitude = stationDetail.value.stationLat;
	getStakeList(1);
});
// 详情组件数据
console.log('stationDetail', stationDetail.value.id);

const schema: DescItem[] = [
	{
		field: 'operatorId',
		label: '充电站编码',
	},
	{
		field: 'stationName',
		label: '充电站名称',
	},
	{
		label: '所属区域',
		field: 'areaArray',
		component: 'JAreaLinkage',
	},
	{
		field: 'operatorId_dictText',
		label: '所属运营商',
	},
];
console.log('mockData', mockData);

const [register] = useDescription({
	title: '基础信息',
	bordered: false,
	data: mockData,
	schema: schema,
});
// 切换直流交流桩
const activeKey = ref('1');
function tabsEvent(activeKey) {
	getStakeList(activeKey);
}
const StakeListData = ref([]);
// 桩列表数据
function getStakeList(poleType) {
	defHttp
		.get({
			url: '/bizChargeStake/list?poleType=' + poleType + '&stationId=' + stationDetail.value.id,
			method: 'get',
		})
		.then((res) => {
			StakeListData.value = res.records;
			console.log('res.records', res.records, StakeListData.value);
		});
}
onMounted(() => {});
</script>
<style lang="less" scoped>
//tabs标签
:deep(.ant-tabs-nav) {
	margin-bottom: 0px !important;
}

// lunboar轮播图
:deep(.slick-slide) {
	text-align: center;
	height: 160px;
	line-height: 160px;
	background: #364d79;
	overflow: hidden;
	z-index: 8888;
}

:deep(.ant-drawer-title) {
	font-weight: 600 !important;
	font-style: normal;
	font-size: 16px !important;
}

:deep(.jeecg-collapse-container__header) {
	border-bottom: 0px;
	padding-left: 0rem;
}

:deep(.jeecg-basic-title-normal) {
	font-weight: 600;
	font-style: normal;
	font-size: 20px;
	color: rgb(0, 0, 0);
}

:deep(.p-2) {
	background: #f8f8f8;
}

// drawer标题不起作用呢
::v-deep.jeecg-basic-drawer-header::before {
	content: '';
	background-color: #00a096;
	width: 4px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -8px;
	border-radius: 3px;
}

::v-deep.ant-drawer-title::before {
	content: '';
	background-color: #00a096;
	width: 4px;
	height: 16px;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -8px;
	border-radius: 3px;
}

// drawer标题不起作用呢
::v-deep.ant-descriptions-item-label {
	font-weight: 300;
	font-style: normal;
	font-size: 14px;
	color: rgba(94, 94, 94, 0.59);
}

::v-deep.ant-descriptions-item-label::after {
	display: none;
}

::v-deep.jeecg-collapse-container__body {
	background: #f8f8f8;
	box-sizing: border-box;
	padding: 14px 14px;
}

// 不起作用呢
::v-deep.basicDrawerDiv .jeecg-basic-title {
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	color: rgba(0, 0, 0, 0.88);

	&::before {
		content: '';
		background-color: #00a096;
		width: 4px;
		height: 16px;
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -8px;
		border-radius: 3px;
	}
}

::v-deepp {
	margin-bottom: 0em;
}

:deep(.jeecg-basic-title-normal) {
	font-weight: 600;
	font-style: normal;
	font-size: 20px;
	color: rgb(0, 0, 0);
}

.jeecg-collapse-container__body {
	background: #e3e3e3;
	box-sizing: border-box;
	padding: 10px;
}

.stationDetailDrawer {
	.drawerTitle {
		font-weight: 600;
		font-style: normal;
		font-size: 28px;
		color: rgb(0, 0, 0);
	}

	.listshebei {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		box-sizing: border-box;
		padding: 20px;
		padding-right: 0px;
	}

	.jichuinfo {
		.gdMap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 22px 0;

			.jichuinfo_top {
			}

			.jichuinfo_center {
				flex: 1;
				margin-left: 35px;
				margin-top: 70px;
				min-width: 290px;

				p {
					margin-top: 10px;

					img {
						width: 13px;
						height: 20px;
						margin-right: 5px;
					}

					span {
						font-weight: 300;
						font-style: normal;
						color: rgb(87, 87, 87);
					}
				}
			}

			img {
				width: 100%;
				height: 164px;
			}
		}
	}

	.shebeiinfo_title {
		display: flex;
		align-items: center;

		.shebeiinfo_title_span {
			font-weight: 600;
			font-style: normal;
			font-size: 20px;
			color: rgb(0, 0, 0);
			margin-right: 20px;
		}

		.tabs {
			color: #00a096;

			span {
				font-weight: 600;
				font-style: normal;
				color: #00a096;
				font-size: 14px;
			}
		}
	}

	.ant-tag-has-color {
		margin-left: 10px;
	}

	.shebeiinfo {
		.shebeiinfo_title {
			font-weight: 600;
			font-style: normal;
			font-size: 20px;
			color: rgb(0, 0, 0);
		}

		.listshebeiones {
			display: flex;
			padding-left: 18px;
			border-bottom: 1px solid #dadada;
			width: 33%;

			img {
				width: 55px;
				height: 190px;
				margin-right: 9px;
			}

			.onesright {
				justify-content: space-around;
				display: flex;
				flex-direction: column;
				padding: 25px 0;

				img {
					width: 16px;
					height: 16px;
					margin-right: 5px;
				}

				p {
					font-weight: 300;
					font-style: normal;
					font-size: 14px;
				}

				p:nth-of-type(2) {
					font-weight: 600;
					font-size: 18px;
				}
			}
		}

		.emptydiv {
			display: flex;
			justify-content: center;
			width: 100%;
		}
	}
}
</style>
